<template>
  <div>
    <el-dialog
      v-model="isShow"
      :title="stuInfo._id?'修改学生':'添加学生'"
      width="600"
      center
      @open="openHandler"
      @close="closeHandler"
    >
      <el-form
        v-loading="isLoading"
        label-width="110px"
        :model="stuInfo"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="学号:" prop="stuNum">
          <el-input
            placeholder="请输入学号"
            v-model="stuInfo.stuNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="stuName">
          <el-input
            placeholder="请输入姓名"
            v-model="stuInfo.stuName"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级:" prop="className">
          <el-select placeholder="请选择班级" v-model="stuInfo.className">
            <el-option
              v-for="item in classList"
              :key="item._id"
              :label="item.className"
              :value="item.className"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位:" prop="jobId">
          <el-select placeholder="请选择职位(可选)" v-model="stuInfo.jobId">
            <el-option
              v-for="item in jobList"
              :key="item._id"
              :label="item.jobName"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交作业次数:">
          <el-input-number :min="0" :max="999" v-model="stuInfo.submitNum" />
        </el-form-item>
        <el-form-item label="是否在读:">
          <el-radio-group v-model="stuInfo.isReading">
            <el-radio :value="1" size="small" border>在读</el-radio>
            <el-radio :value="2" size="small" border>离校</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input
            type="password"
            v-model="stuInfo.password"
            show-password
            placeholder="请输入密码(默认为123456)"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeHandler">取消</el-button>
          <el-button type="primary" @click="AddOrUpdateStudent">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getClassListAPI } from "@/api/class";
import { getJobListAPI } from "@/api/job";
import { AddOrUpdateStudentAPI, getStudentDetailAPI } from "@/api/student";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
const emits = defineEmits(["getStudentList"]);
let isShow = defineModel();
let stuId = defineModel("stuId");
let stuInfo = reactive({
  stuNum: "",
  stuName: "",
  submitNum: 0,
  isReading: 1,
  password: "",
  jobId: "6677e46f71aebd67df73ead9",
  className: "",
});

let form = ref();
let classList = ref([]);
let jobList = ref([]);
let isLoading = ref(false);
let rules = reactive({
  stuNum: [
    { required: true, message: "请输入学号", trigger: "blur" },
    { min: 9, max: 12, message: "长度为9-12之间", trigger: "blur" },
  ],
  stuName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度为2-10之间", trigger: "blur" },
  ],
  jobId: [{ required: true, message: "请选择职位", trigger: "change" }],
  className: [{ required: true, message: "请选择班级", trigger: "change" }],
});
const getStuInfo = async () => {
  let result = await getStudentDetailAPI(stuId.value);
  console.log(result);
  stuInfo._id = result.data._id;
  stuInfo.stuNum = result.data.stuNum;
  stuInfo.stuName = result.data.stuName;
  stuInfo.submitNum = result.data.submitNum;
  stuInfo.isReading = result.data.isReading;
  stuInfo.password = result.data.password;
  stuInfo.jobId = result.data.jobId?._id;
  stuInfo.className = result.data.className;
};
const openHandler = async () => {
  isLoading.value = true;
  if (stuId.value) {
    getStuInfo();
  }
  let result = await getClassListAPI(1, 999);
  let result2 = await getJobListAPI(1, 999);
  classList.value = result.data.list;
  jobList.value = result2.data.list;
  isLoading.value = false;
};
const AddOrUpdateStudent = async () => {
  await form.value.validate();
  let result = await AddOrUpdateStudentAPI(stuInfo);
  if (result.code == 200) {
    ElMessage.success(stuInfo._id?"修改成功":"添加成功");
    emits("getStudentList");
    closeHandler();
  }
};
const closeHandler = () => {
  form.value.resetFields();
  isShow.value = false;
  Object.assign(stuInfo, {
    stuNum: "",
    stuName: "",
    submitNum: 0,
    isReading: 1,
    password: "",
    jobId: "6677e46f71aebd67df73ead9",
    className: "",
    _id:''
  });
  stuId.value = ''
};
</script>

<style lang="scss" scoped></style>
